/**
 * state 练习  轮播图
 */
import React, { Component } from 'react'
import './4-slider.css';

export default class Slider extends Component {
  // 1. 声明状态
  state = {
    num: 1
  }

  render() {
    return (
      <div className="slider-container">
        <div className="slider-wrapper">
          {/* 2. 使用状态 */}
          <img width='100%' src={`/images/${this.state.num}.jpg`} alt="12312" />
          <div className="btn left" onClick={this.prev}>&lt;</div>
          <div className="btn right" onClick={this.next}>&gt;</div>
        </div>
      </div>
    )
  }
  //下一张
  next = () => {
    //获取当前的 num 值
    let {num} = this.state;
    //判断边界
    if(num >= 5){
      num = 1;
    }else{
      num += 1;
    }
    //更新状态
    this.setState({
      num: num
    })

  }

  //上一张
  prev = () => {
    //获取当前的 num 值
    let {num} = this.state;
    //判断边界
    if(num <= 1){
      num = 5;
    }else{
      num -= 1;
    }
    //更新状态
    this.setState({
      num: num
    })
  }

}
